<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
          margin: 0;
          padding: 0;
      }
      div{
         background-size: cover;
      }

      .box{
          width: 200px;
          height: 200px;
          margin: 300px auto;
          position: relative;
          transform-style: preserve-3d;
         
          /* perspective: 500px; */
          animation: over 10s linear infinite alternate ; 
      }
      @keyframes over{
          form{
              transform: none;
          }
          to{
            transform: rotateX(360deg) rotateY(720deg) translate(40px, -320px);
            

          }
      }
      .box1{
          width: 100%;
          height: 100%;
          background:url("share1.png") no-repeat;
          background-color: blue;
         
          position: absolute;
          transform: translateZ(100px);
         
         
      }
      .box2{
          width: 100%;
          height: 100%;
          background:url("share2.png") no-repeat;
          background-color: red;
          position: absolute;
          transform: translateY(100px) rotateX(-90deg);
          
         
      }
     .box3{
         width: 100%;
         height: 100%;
         position: absolute;
         background:url("share3.png") no-repeat;
         background-color: blueviolet;
         transform: translateY(-100px) rotateX(90deg);
     }
     .box4{
         width: 100%;
         height: 100%;
         position: absolute;
         background:url("share4.png") no-repeat;
         background-color: black;
         transform:translateZ(-100px);
     }
     .box5{
         width: 100%;
         height: 100%;
         position: absolute;
         background:url("share5.png") no-repeat;
         background-color: green;
         transform:translateX(-100px) rotateY(90deg);
     }
     .box6{
         width: 100%;
         height: 100%;
         position: absolute;
         background:url("share6.png") no-repeat;
         background-color: darkorange;
         transform:translateX(100px) rotateY(-90deg);
     }
    /* .box:hover{
        transform: rotateX(360deg) rotateY(720deg);
    } */
    </style>
</head>
<body>
    <input type="button" value="暂停" id="zan">
    <input type="button" value="开始" id="kai">
    <div class="box" id="box7">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
    <script>
        var zan = document.getElementById('zan');
        var kai = document.getElementById('kai');
        var box7= document.getElementById('box7');
        zan.onclick = function (){
            console.log(zan);
            box7.style.animationPlayState = 'paused';
        }
        kai.onclick = function(){
            box7.style.animationPlayState = 'running';
        }
    
    </script>
</body>
</html>